<!--
  -
  - +----------------------------------------------------------------------
  - | 友得云客  - 开启房产营销新纪元
  - +----------------------------------------------------------------------
  - | Copyright (c) 2019~2024 优得（西安）信息科技有限公司版权所有
  - +----------------------------------------------------------------------
  - | Licensed 友得云客不是自有软件 未经允许不可移除相关版权
  - +----------------------------------------------------------------------
  - | Author: www.youdeyunke.com
  - +----------------------------------------------------------------------
  -
  -->

<template>
  <el-dialog :title="title" :destroy-on-close="true" :visible.sync="show" width="400px">
    <div v-if="qr" class="outer">
      <div class="qr">
        <el-image
          v-loading="loading"
          :disabled="loading"
          :src="qr"
          fit="fill"
          style="width:300px;height:300px;"
          @error="error = '图片加载失败'"
        />
      </div>

    </div>

    <div slot="footer">
      <el-button size="mini" :disabled="loading" type="default" plain :loading="loading" @click="show = false">取消
      </el-button>
      <el-button
        size="mini"
        :disabled="loading"
        plain
        :loading="loading"
        type="primary"
        icon="el-icon-refresh"
        @click="generateQRCode"
      >
        重新生成
      </el-button>
      <el-button
        size="mini"
        :disabled="loading"
        :loading="loading"
        type="primary"
        icon="el-icon-download"
        @click="downloadHandle"
      >下载保存
      </el-button>
    </div>

  </el-dialog>
</template>

<style lang="scss" scoped></style>

<script>
import { refreshPostQrcode } from '@/api/post'
import { refreshAuctionHouseQrcode } from '@/api/auctionhouse'
import { refreshHouseQrcode } from '@/api/house'

export default {
  components: {},
  props: {
    category: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      title: '微信扫码查看',
      error: null,
      qr: null,
      show: false,
      pid: null,
      loading: false
    }
  },
  computed: {},

  watch: {},

  created: function() {

  },

  methods: {
    downloadHandle: function() {
      window.open(this.qr, '_blank')
    },

    // 动态调用刷新二维码的方法
    invokeRrefreshQrFunction(functionName, ...args) {
      const functionsMap = {
        refreshPostQrcode, refreshAuctionHouseQrcode, refreshHouseQrcode
      }
      const func = functionsMap[functionName]

      // eslint-disable-next-line no-constant-condition
      if (typeof func === 'function') {
        // 动态调用函数，并传递参数
        this.loading = true
        func(...args).then(res => {
          this.loading = false
          if (res.code !== 0) {
            return
          }
          this.$message.success('生成成功')
          this.qr = res.data
        }).catch((err) => {
          this.loading = false
          this.$message.error('刷新二维码时出错')
        })
      } else {
        console.error(`Function "${functionName}" does not exist.`)
      }
    },

    generateQRCode: async function() {
      // 动态执行
      var functionName = ''
      switch (this.category) {
        case 'post':
          functionName = 'refreshPostQrcode'
          break
        case 'auctionhouse':
          functionName = 'refreshAuctionHouseQrcode'
          break
        case 'house':
          functionName = 'refreshHouseQrcode'
          break
      }
      this.invokeRrefreshQrFunction(functionName, this.pid)
    },

    openDialog: function(item) {
      this.show = true
      this.qr = item.qr
      this.pid = item.id
      this.ptitle = item.title
    }

  }
}
</script>
<style scoped>
.outer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
</style>
